<template>
  <div>
    <el-card class="card_box_index" body-style="padding:10px">
      <!--顶部返回框-->
      <el-page-header @back="goBack" :content="this.restaurantName" style="margin: 5px"></el-page-header>

      <!--搜索栏-->
      <el-row style="margin-bottom: 5px;">
        <el-form
            :inline="true"
            label-width="90px"
        >

          <el-form-item>
            <el-input placeholder="搜索" v-model="searchForm.text" style="width: 240px;">
              <i slot="suffix" class="el-input__icon el-icon-search"
                 @click="searchCommodity"></i>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="danger" @click="getCommodityList">获取全部美食</el-button>
          </el-form-item>

        </el-form>
      </el-row>


      <!--商家美食展示-->
      <el-card class="card_show" shadow="never" body-style="padding:5px">
        <div>
          <el-row>
            <div v-for="i in commodityList" :key="i.text">
              <el-col :span="5">

                <!--骨框架-->
                <div style="width: 200px">
                  <el-skeleton style="width: 200px" :loading="loading" animated>

                    <template slot="template">
                      <el-skeleton-item
                          variant="image"
                          style="width: 160px; height: 160px;"
                      />

                      <div style="padding: 10px;">
                        <el-skeleton-item variant="h3" style="width: 50%;"/>
                        <div style="display: flex; align-items: center; margin-top: 16px; height: 16px;">
                          <el-skeleton-item variant="text" style="margin-right: 16px;"/>
                          <el-skeleton-item variant="text" style="width: 30%;"/>
                        </div>
                      </div>

                    </template>

                    <!--美食信息展示-->
                    <template>
                      <el-card class="card_commodity" shadow="hover" body-style="padding:10px">

                        <el-image
                            style="width: 100%; height: 150px; "
                            :src="handlerImg(i.picture)"
                            @click="goToCommodityInformation(i.id)"
                            fit="fill"></el-image>
                        <el-divider></el-divider>
                        <div>
                          <span style="font-size: 18px">{{ i.text }}</span><br>
                          <span style="color:#F56C6C;font-size: 20px">￥:{{ i.price }}</span>
                          <el-button type="text" @click="goToCommodityInformation(i.id)" style="float: right;font-size: 18px">详情
                          </el-button>
                        </div>

                      </el-card>
                    </template>
                  </el-skeleton>
                </div>

              </el-col>
            </div>
          </el-row>
        </div>

      </el-card>

      <!--分页-->
      <Pagination :total="total" :page="currentPage" :limit="pageSize" @pagination="handlePageChange"></Pagination>

    </el-card>
  </div>
</template>

<script>
import Pagination from "@/component/pagination/Pagination";
import {getAllCommodityUser, searchCommodityByText} from "@/api/user/commodity/userCommodity";
import {getGeneralUserById} from "@/api/general/userGeneral";

export default {

  name: "Index",

  //id：restaurantId
  props:['id',"restaurantName"],

  components: {
    Pagination
  },

  data() {
    return {
      total: 0,//美食总数
      currentPage: 0,//当前页码
      pageSize: 4,//每页显示条数

      originalTotal: 0,//原始的美食总数

      searchForm: {
        text: '',//美食名称
      },

      /**
       * 骨框架加载
       */
      loading: false,

      /**
       * 美食列表
       */
      commodityList: [],

      /**
       * 当前个人用户/商家用户
       */
      user: undefined,
    }
  },

  created() {
    this.getGeneralUserById();
  },

  methods: {
    /**
     * 跳转至当前商品详细界面,并传递当前商品的商品id
     */
    goToCommodityInformation(commodityId) {
      this.$router.push({
        name:'commodityInformation',
        params:{commodityId:commodityId,restaurantId:this.id,restaurantName:this.restaurantName}
      })
    },

    /**
     * 获得餐厅中全部的美食信息
     */
    getGeneralUserById() {
      const formData = new FormData();

      formData.append("id", this.id);

      //获取商家用户的信息
      getGeneralUserById(formData).then(res => {
        this.user = res.user;

        this.getCommodityList();
      }).catch(() => {
        this.$message.error("餐厅信息获取失败");
      })
    },

    /**
     * 获取美食信息列表
     */
    getCommodityList() {
      const formData = new FormData();

      formData.append("userId", this.user.id);
      formData.append("currentPage", this.currentPage);
      formData.append("pageSize", this.pageSize);

      getAllCommodityUser(formData).then(res => {
        this.commodityList = res.commodities;
        this.total = res.total;
        this.originalTotal = this.total;
      }).catch(() => {
        this.$message({
          message: "error",
          type: "error"
        })
      })

    },

    /**
     * 根据美食名称查询美食
     */
    searchCommodity() {
      if (this.searchForm.text === '') {
        this.$message.warning("请输入美食名称");
        this.commodityList = [];
        this.total = 0;
      } else {
        const formData = new FormData();

        formData.append("userId", this.user.id);
        formData.append("text", this.searchForm.text);
        formData.append("currentPage", this.currentPage);
        formData.append("pageSize", this.pageSize);

        searchCommodityByText(formData).then(res => {
          this.commodityList = res.commodities;
          this.total = res.total;
        }).catch(() => {
          this.$message({
            message: "error",
            type: "error"
          })
        })
      }
      this.searchForm.text=''
    },

    /**
     * 处理分页
     */
    handlePageChange(val) {
      this.currentPage = val.page;
      if(this.originalTotal===this.total){
        this.getCommodityList();
      }else {
        this.searchCommodity();
      }

    },

    /**
     * 展示图片
     */
    handlerImg(picture){
      console.log("data:image/jpeg;base64," + picture)
      return "data:image/jpeg;base64," + picture
    },

    /**
     * 返回首页
     */
    goBack() {
      this.$router.push('/index')
    },
  }
}
</script>

<style lang="less">
.card_box_index {
  height: 80vh;
}

.card_commodity {
  width: 200px;
  height: 270px;
  margin-left: 30px;
  margin-top: 30px;
}

.el-input__icon {
  cursor: pointer;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.card_show {
  height: 60vh;
}

div .el-page-header{
  display: block;
}

div .el-page-header__content{
  display: block;
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  font-family: "楷体";
}

/* el-divider 修改高度&虚线效果 */
//div[class="el-divider el-divider--horizontal"] {
//  margin: 5px 0 ;
//  background-color: #DCDFE6;
//  //border-top: 1px dashed #e8eaec;
//}

/*.el-tabs__header {*/
/*  margin: 0 0;*/
/*}*/
</style>
